import React, { Component } from "react";
import ToDoList from "./ToDoList";
import MyContext from "./store";
//引入图片

class Demo3 extends Component{
    static contextType = MyContext;
    render(){
        console.log(this);
        return(
            <MyContext.Provider value={this.value}>
                <div>
                    <h2>Demo3!!!</h2>
                    <button onClick={()=>this.context.setTheme('aqua')}>更换主题</button>
                    <div style={{backgroundColor:this.context.theme}}>ddd</div>
                </div>
            </MyContext.Provider>
        )
    }
}


const Demo2 = () => {
    return <div>
        <h2>Context</h2>
        <Demo3 />
        <MyContext.Consumer>
            {
                value => {
                    console.log(value);
                    return (
                        <div style={{ backgroundColor: value.theme }}>
                            子组件
                        </div>
                    )
                }
            }
            
        </MyContext.Consumer>
    </div>
}
const Demo = () => {
    return <div><Demo2 /></div>
}


class App extends Component{
    state = {username:'liu',theme:'#ccc'}
    setTheme = (theme)=>{
        this.setState({theme})
    }
    render(){
        console.log(this);
        return(
            <MyContext.Provider value={{ ...this.state,setTheme:this.setTheme }}>
                <MyContext2.Provider></MyContext2.Provider>
            <div className='app'>

                <ToDoList />
                <Demo />
                
            </div>
        </MyContext.Provider>);
        
    }
}


// const App = () => {
//     return (
//         <MyContext.Provider value={{ username: 'liu', theme: '#3a6eff' }}>
//             <div className='app'>

//                 <ToDoList />
//                 <Demo />
                
//             </div>
//         </MyContext.Provider>);
// }

export default App;